<template>
  <div>
      <OrderItem v-for="orderItem in orderInitiateList" :key="orderItem.cuid"  v-bind="orderItem"></OrderItem>
    <div v-if="isLoading" class="loading">拼命加载中...</div>
    <div v-if="isExactly" class="loading">已经到底了！</div>
  </div>
</template>

<script>
import OrderItem from "@/components/order/OrderInfo.vue";
import {reqInitiateListByHot} from "@/api";
export default {
  name: "orderHome",
  components: { OrderItem},
  data () {
    return {
      orderInitiateList: [],
      params:{pageNo: 1, pageSize: 5},
      isLoading: false,
      isExactly: false,
      pages:''
    }
  },
  computed: {
  },
  created() {
    // 进入页面时请求 内容精选
    reqInitiateListByHot(this.params).then(( data ) => {
      this.orderInitiateList = data.items;
      console.log(data)
      // 页数加一
      this.params.pageNo++
    });
  },
  methods: {
    view() {
      // console.log("在外部监听到的滚动");
      // 当数据全部加载完成后
      // 显示加载的图标
      this.isExactly = false;
      this.isLoading = true;

      setTimeout(()=> {
        // 下拉至图标处请求 内容精选
        reqInitiateListByHot(this.params).then((data) => {
            // 页数加一
            this.params.pageNo++
          // 追加至 orderInitiateList 数组
          this.orderInitiateList.push(...data.items);
          if (data.items.length<this.params.pageSize) {
            // 隐藏加载的图标
            this.isLoading = false;
            this.isExactly = true
            return
          }
          // 隐藏加载的图标
          this.isLoading = false;
        });
      },1000)
    },
  }
}
</script>

<style scoped>
.loading{
  margin-top: 10px;
  text-align:center;
  background-color: #FFF5F5;
}
</style>
